<template>
	<view class="container">
		<!-- 冒泡 -->
		<view class="box1" hover-class="box11" hover-stay-time="40">
			<view hover-stop-propagation class="box2" hover-class="box22" hover-stay-time="40"></view>
		</view>
		<!-- scroll区域滚动 -->
		<scroll-view class="scroll" scroll-x>
			<view v-for="item in 50" :key="item"></view>
		</scroll-view>
		<!-- 轮播 -->
		<swiper class="swiper" indicator-dots indicator-active-color="#00ff00" indicator-color="#0b5d1a"
			:autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image src="../../static/c1.png" mode=" center"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/c2.png" mode=" center"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/c3.png" mode=" center"></image>
			</swiper-item>
		</swiper>
		<!-- 按钮 -->
		<button style="margin: 30rpx;" type="primary" size="default" loading>按钮 &#xe434;</button>
		<!-- input -->
		<view style="margin-bottom 30rpx; ;">
			<input style="border: 1px solid;" type="tel" value="" placeholder="请输入手机号" />
			<input style="border: 1px solid;" password maxlength="32" type="safe-password" placeholder="请输入密码" />
		</view>








		<view style="margin-bottom: 1000rpx;"></view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.box1 {
			width: 500rpx;
			height: 500rpx;
			background: #666;
			border: 1rpx solid #ff0000;

			&.box11 {
				background: #999;
			}

			.box2 {
				width: 300rpx;
				height: 300rpx;
				background: #aaff7f;

				&.box22 {
					background: #00ff00;
				}
			}
		}

		.scroll {
			width: 500rpx;
			height: 100rpx;
			margin: 40rpx 0;
			border: 1rpx solid #ff0000;
			//不换行
			white-space: nowrap;

			view {
				display: inline-block;
				height: 100rpx;
				width: 100rpx;
				background: green;
				border: 1px solid black;
			}
		}

		.swiper {
			width: 500rpx;
			height: 300rpx;
			border: 1rpx solid #ff0000;

			swiper-item {
				width: 100%;
				height: 100%;
				background: #ffa;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>